<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<style type="text/css">
			body,
			.mui-content {
				background-color: #333;
				color: #fff;
			}
			.info {
				margin: 35px 1px 40px 25px;
				border-bottom: 1px groove #999;
				height: 90px;
			}
			.info+.content {
				margin: 10px 15px 35px;
				color: #bbb;
				text-indent: 1em;
				font-size: 14px;
				line-height: 24px;
			}
			.mui-table-view {
				margin-bottom: 35px;
			}
			.setting,
			.chat {
				color: #fff;
				font-size: 24px;
			}
			.setting {
				float: left;
			}
			.chat {
				float: right;
			}
			.setting {
				position: absolute;
				left: 10px;
				bottom: 5px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="info">
				<a id="login">
					<img src="img/usr_unlogin.jpg" style="width: 70px;height: 70px; border-radius: 35px;" />
				</a>
				<span id="usr_name" style="color: #bbb;">立即登录</span>
			</div>
			<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted" style="color: #ddd;">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						&nbsp;&nbsp;&nbsp;&nbsp;<i class="mui-icon mui-icon-home"></i>&nbsp;&nbsp;所有职位
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="pages/cv-center.html">
						&nbsp;&nbsp;&nbsp;&nbsp;<i class="mui-icon mui-icon-paperclip"></i>&nbsp;&nbsp;简历中心
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="pages/person-center.html">
						&nbsp;&nbsp;&nbsp;&nbsp;<i class="mui-icon mui-icon-person"></i>&nbsp;&nbsp;个人中心
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="pages/messages.html">
						&nbsp;&nbsp;&nbsp;&nbsp;<i class="mui-icon mui-icon-email"></i>&nbsp;&nbsp;我的消息 <span class="mui-badge mui-badge-primary">2</span></a>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="pages/setting.html">
						&nbsp;&nbsp;&nbsp;&nbsp;<i class="mui-icon mui-icon-gear"></i>&nbsp;&nbsp;设置</a>
					</a>
				</li>
			</ul>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script type="text/javascript" charset="utf-8">
			var subWebview = null,
				template = null;
			mui('.mui-table-view').on('tap', 'a', function() {
				var href = this.href;
				var title = this.innerText.trim();
				var showMenu = false;
				if (~title.indexOf("我的消息")) { //祛除尾部的数字
					title = "我的消息";
				}
				if (~title.indexOf("所有职位")) {
					close();
					return;
				}
				if (~title.indexOf("简历中心")) {
					showMenu = true;
				}
				template = plus.webview.getWebviewById("default-main");
				//获得共用子webview
				subWebview = template.children()[0];
				//通知模板修改标题，并显示隐藏右上角图标；
				mui.fire(template, 'updateHeader', {
					title: title,
					showMenu: showMenu
				});
				if (subWebview.getURL() != href) {
					subWebview.loadURL(href);
				} else {
					subWebview.show();
				}
				template.show('slide-in-right', 150);
			});
			/**
			 * 关闭侧滑菜单
			 */
			function close() {
					mui.fire(mui.currentWebview.opener(), "menu:close");
				}
				//在android4.4.2中的swipe事件，需要preventDefault一下，否则触发不正常
			window.addEventListener('dragstart', function(e) {
				mui.gestures.touch.lockDirection = true; //锁定方向
				mui.gestures.touch.startDirection = e.detail.direction;
			});
			window.addEventListener('dragleft', function(e) {
				if (!mui.isScrolling) {
					e.detail.gesture.preventDefault();
				}
			});
			 //监听左滑事件，若菜单已展开，左滑要关闭菜单；
			window.addEventListener("swipeleft", function(e) {
				if (Math.abs(e.detail.angle) > 170) {
					close();
				}
			});
			
			/**立即登录*/
			document.querySelector("#login").addEventListener('tap', function() {
				mui.openWindow({
					url: 'pages/login.html',
					show: {
						aniShow: 'slide-in-bottom', //页面显示动画，默认为”slide-in-right“
						duration: 300 //页面动画持续时间
					},
					waiting: {
						autoShow: false
					}
				});
			});
		</script>
	</body>

</html>